<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/custom.css" />
	</head>
	<style type="text/css">
		.router-link-active {
			background: #2c3e50 !important;
			color: white !important;
		}
		.fade-enter-active,.fade-lave-active{
			transition: opacity .5s; 
		}
		.fade-enter,.fade-lave-active{
			opacity: 0;
		}
	</style>

	<body>
		<div id="app">
			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="page-header">
						<h2>Router Basic - 01</h2>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2 col-xs-offset-2">
					<div class="list-group">
						<!-- 使用 router-link 组件来导航. -->
						<!-- 通过传入 `to` 属性指定链接. -->
						<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
						<router-link class="list-group-item" :to="{path: '/home'}">Home</router-link>
						<router-link class="list-group-item" to="/about">About</router-link>
						<!--两种写法均可:to={}或者to=-->
					</div>
				</div>
				<div class="col-xs-6">
					<div class="panel">
						<div class="panel-body">
							<!-- 路由出口 -->
							<!-- 路由匹配到的组件将渲染在这里 -->
							<transition name='fade'><router-view></router-view></transition>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="well">
						<p>当前路径：<code>{{$route.path}}</code></p>
						<p>当前参数：<code>{{$route.params | json}}</code></p>
						<p>路由名称：<code>{{$route.name}}</code></p>
						<p>路由查询参数：<code>{{$route.query | json}}</code></p>
						<p>路由匹配项：<code>{{$route.matched | json}}</code></p>
					</div>
				</div>
			</div>

			<!--<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="well">
						{{{ msg }}}
					</div>
				</div>
			</div>-->

		</div>

		<template id="home">
			<div>
				<h1>Home</h1>
				<p>{{msg}}</p>
				<div>
					<ul class="nav nav-tabs">
						<li>
							<router-link :to="{name:'news'}">News</router-link>
							<!--具名路径-->
						</li>
						<li>
							<router-link to="/home/message">Messages</router-link>
						</li>
						<!--两种写法均可-->
						<!--两种写法均可:to={}或者to=-->
					</ul>
					<transition name='fade'><router-view></router-view></transition>
				</div>
			</div>
		</template>

		<template id="news">
			<div>
				<ul>
					<li>
						<router-link :to="{ name: 'detail', params: {id: '01'} }">News 01</router-link>
						<!--具名路径-->
					</li>
					<li>
						<router-link to="/home/news/detail/02">News 02</router-link>
					</li>
					<li>
						<router-link to="/home/news/detail/03">News 03</router-link>
					</li>
					<!--两种写法均可-->
					<!--两种写法均可:to={}或者to=-->
				</ul>
				<div>
					<transition name='fade'><router-view></router-view></transition>
				</div>
			</div>
		</template>

		<template id="message">
			<div>
				<ul>
					<li>Message 01</li>
					<li>Message 02</li>
					<li>Message 03</li>
				</ul>
			</div>

		</template>

		<template id="newsDetail">
			<div>
				News Detail - {{$route.params.id}} ......
			</div>
		</template>

		<template id="about">
			<div>
				<h1>About</h1>
				<p>This is the tutorial about vue-router.</p>
			</div>
		</template>
	</body>
	<script src="js/vue-v2.4.2-min.js"></script>
	<script src="js/vue-router-v2.7.0.js"></script>
	<script>
		//		//路由钩子函数执行顺序演示
		//		var well = new Vue({
		//			el: '.well',
		//			data: {
		//				msg: '',
		//				color: '#ff0000'
		//			},
		//			methods: {
		//				setColor: function() {
		//					this.color = '#' + parseInt(Math.random() * 256).toString(16) +
		//						parseInt(Math.random() * 256).toString(16) +
		//						parseInt(Math.random() * 256).toString(16)
		//				},
		//				setColoredMessage: function(msg) {
		//					this.msg += '<p style="color: ' + this.color + '">' + msg + '</p>'
		//				},
		//				setTitle: function(title) {
		//					this.msg = '<h2 style="color: #333">' + title + '</h2>'
		//				}
		//			}
		//		})

		//		function RouteHelper(name) {
		//			var route = {
		//				canReuse: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
		//					return true
		//				},
		//				canActivate: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
		//					transition.next()
		//				},
		//				activate: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
		//					transition.next()
		//				},
		//				canDeactivate: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
		//					transition.next()
		//				},
		//				deactivate: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
		//					transition.next()
		//				},
		//				data: function(transition) {
		//					well.setColoredMessage('执行组件' + name + '的钩子函数:data')
		//					transition.next()
		//				}
		//			}
		//			return route;
		//		}

		// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

		// 1. 定义（路由）组件。
		// 可以从其他文件 import 进来

		/* 创建组件构造器  */
		var Home = Vue.extend({
			template: '#home',
			data: function() {
				return {
					msg: 'Hello, vue router!',
					currentPath: ''
					//					path: ''
				}
			},
			route: {
				data: function(transition) {
					transition.next({
						currentPath: transition.to.path
					})
				}
			}
			//			route: RouteHelper('Home')
		})

		var News = Vue.extend({
			template: '#news'
			//			route: RouteHelper('News')
		})

		var Message = Vue.extend({
			template: '#message'
			//			route: RouteHelper('Message')
		})

		var NewsDetail = Vue.extend({
			template: '#newsDetail'
			//			route: RouteHelper('NewsDetail')
		})

		var About = Vue.extend({
			template: '#about'
			//			route: RouteHelper('About')
		})

		// 2. 定义路由
		// 每个路由应该映射一个组件。 其中"component" 可以是
		// 通过 Vue.extend() 创建的组件构造器，
		// 或者，只是一个组件配置对象。
		// 我们晚点再讨论嵌套路由。

		/* 创建路由映射  */
		const routes = [{
				path: '/home',
				component: Home,
				//配置子路由
				children: [{
						name: 'news',
						path: '/home/news',
						component: News,
						//配置子路由
						children: [{
							name: 'detail',
							path: '/home/news/detail/:id',
							component: NewsDetail
						}]
					},
					{
						path: '/home/message',
						component: Message
					}
				]
			},
			{
				path: '/about',
				component: About
			},
			{
				path: '/',
				component: Home
			}
		]

		// 3. 创建 router 实例，然后传 `routes` 配置
		// 你还可以传别的配置参数, 不过先这么简单着吧

		/* 创建路由器  */
		const router = new VueRouter({
			routes // （缩写）相当于 routes: routes
		})
		//ps:vue2.0写法创建路由器写在映射路由之后否则会报没有定义routes这个错误

		// 4. 创建和挂载根实例。
		// 记得要通过 router 配置参数注入路由，
		// 从而让整个应用都有路由功能

		/* 启动路由  */
		const app = new Vue({
			router
		}).$mount('#app')

		//(自己理解)JavaScriptps流程:1,创建组件：创建单页面应用需要渲染的组件
		//                          2,映射路由：
		//			                3,创建路由：
		//			                4,启动路由：
		//          HTML流程:1,使用<router-link to="/home">Home</router-link>组件导航
		//                   并且通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签
		//                   2,使用<router-view>标签

		//          vue版本和vue-router版本必须是2.x的
	</script>

</html>